<template>
  <div class="home">
     <v-header></v-header>
      <div class="img">
        <img src="@/assets/images/home/GYWM.png" alt="">
          <div class="query">
            <div class="title">
              <h3>关于我们</h3>
              <p>About us</p>
            </div>
          </div>
          <div class="queryA">
                <p>泛糖科技 · 成就无限可能</p>
          </div>
      </div>
     <div class="section">
        <div class="sectionA">
            <div class="left">
                <div class="cont">
                    <i class="z-iconmap"></i>
                    <span class="title">地址:</span>
                    <span class="content">南宁市良庆区平乐大道18号8楼</span>
                </div>
                <div class="cont">
                    <i class="z-icondianhua"></i>
                    <span class="title">电话:</span>
                    <span class="content">0771-8062462</span>
                </div>
                <div class="cont">
                    <i class="z-icontubiao209"></i>
                    <span class="title">邮件:</span>
                    <span class="content">info@hisugar.com</span>
                </div>
                <div class="cont">
                    <i class="z-iconfax"></i>
                    <span class="title">传真:</span>
                    <span class="content">0771-8062474</span>
                </div>
            </div>
            <div class="right"></div>
            <div class="buttonMap">
                <locationMap />
            </div>
        </div>

     </div>
     <v-footer class="footer"></v-footer>
  </div>
</template>

<script>
import VHeader from '@/views/layout/header'
import VFooter from '@/views/layout/footer'
import locationMap from "../components/locationMap";
export default {
  components: {
    VHeader,
    VFooter,
    locationMap
  },
  mounted(){
  },  
  methods:{
    
  }
}
</script>

<style lang='scss' scoped>
.home{
  display: flex;
  flex-direction: column;
  height: 100%;
  .img{
    width: 100%;
    height:700px;
    position: relative;
    img{
      width: 100%;
      height: 100%;
    }
    .query{
        width: 200px;
        height: 60px;
        color: #fff;
        position: absolute;
        top: 85px;
        left: 170px;
        .title{
          position: absolute;
          left: 30px;
          width: 200px;
          height: 50px;
          h3{
              font-size: 27px;
              font-weight: 300;
          }
          p{
            font-size: 12px;
          }
        }
      }
    .queryA{
      width: 100%;
      height: 80px;
      text-align: center;
      line-height: 80px;
      font-size: 60px;
      color: #ffff;
      position: absolute;
      top: 40%;
    }
  }
    .section {
      width: 100%;
      flex: 1 0 auto;
      background: #F4F5F9;
      .sectionA{
          width: 80%;
          margin: 0 auto 50px auto;
          padding-top: 30px;
          display: flex;
          justify-content: space-between;
            .left{
              width: 35%;
              height: 320px;
              background: #fff;
              
              .cont{
                width: 100%;
                height: 80px;
                border-bottom: 2px solid #F4F5F9;
                line-height: 80px;
                padding: 0 20px 0 20px;
                i{
                  width: 25px;
                  height: 20px;
                  font-size: 18px;
                  color: #DADADA;
                }
                .title{
                    font-size: 17px;
                    color:#6C6C6C;
                    margin-left:5px;
                  }
                  .content{
                    padding-left: 20px;
                    font-size: 16px;
                    color: #333;
                  }
              }
            }
            .buttonMap{
              width: 62%;
              height: 320px;
              border: 1px solid hsla(0,0%,79.2%,.5);
              -webkit-box-shadow: 0 2px 4px 0 hsla(0,0%,79.2%,.5);
              box-shadow: 0 2px 4px 0 hsla(0,0%,79.2%,.5);

            }
      }
    }
    .footer{
      flex: 0 0 auto;
  }
}
</style>